<template>
  <div>
    <div class="cart-container">
      <div class="cart-header">
        <h3 class="cart-title">确认订单</h3>
        <div class="cart-desc">请仔细核对订单收货信息</div>
      </div>
      <CartAddressCard
        :addressList="addressList"
        @saveAddressInfo="saveAddressInfo"
      />
      <!-- 优惠券列表 -->
      <CartCouponCard
        :currCouponId="currCouponId || 0"
        :couponList="confirmInfo.couponList"
        @saveCouponInfo="saveCouponInfo"
      />
      <!-- 支付方式 -->
      <div class="pay-type-list">
        <h4 class="title">请选择支付方式</h4>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in payType" :key="item.name">
            <div
              class="pay-card"
              :class="{ 'active-pay': item.value == activePayType }"
              @click="selectType(item.value)"
            >
              <img :src="item.url" alt="" v-if="item.url" />
              <span v-else>{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="cart-list">
        <el-table :data="list">
          <el-table-column label="商品" width="450">
            <template #default="scope">
              <div class="order-item">
                <img :src="scope.row.skuPic" alt="" class="img" />
                <div class="order-info">
                  <div class="title">{{ scope.row.title }}</div>
                  <div
                    class="attr"
                    v-for="item in scope.row.skuAttrsVals"
                    :key="item.attrId"
                  >
                    {{ item.attrName }}: {{ item.attrValue }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价(元)" align="center" prop="price">
            <template #default="scope">
              <span class="red" style="font-size: 14px; font-weight: 300">{{
                scope.row.price
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center" prop="count">
          </el-table-column>
          <el-table-column label="小计(元)" align="center">
            <template #default="scope">
              <span class="red" style="font-size: 16px; font-weight: 300">
                {{ scope.row.totalPrice }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="purchase">
        <span class="pur-text">
          商品总价(不含运费)
          <span
            class="red"
            style="text-decoration: line-through; font-size: 14px"
            >￥{{ confirmInfo.total }}
          </span>
        </span>
        <span class="red" style="margin-right: 5px"
          >￥{{ calculateFinalPrice }}</span
        >
        <el-button color="rgb(220 38 38)" @click="handleConfirmoOrder"
          >确认订单</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getConfirmOrderInfo,
  submitOrder,
} from "@/api/mall/client/order/order";
import CartAddressCard from "@/components-mall/CartAddressCard/index.vue";
import CartCouponCard from "@/components-mall/CartCouponCard/index.vue";
import wxIcon from "@/assets/images/mall/payment/wxpay_logo.gif";
import alipayIcon from "@/assets/images/mall/payment/alipay_logo.gif";
import unionIcon from "@/assets/images/mall/payment/unionpay_logo.gif";
import Decimal from "decimal.js";

const { proxy } = getCurrentInstance();

const router = useRouter();
const route = useRoute();
const query = route.query;
console.log(query);
const list = ref([]);
const confirmInfo = ref({});
const addressList = ref([]);
const activePayType = ref(1);
let currCouponId = computed(() => {
  if (confirmInfo.value.couponList) {
    const coupon = confirmInfo.value.couponList.find(
      (item) => item.checked == true
    );
    if (coupon == undefined) {
      return 0;
    } else {
      return coupon.id;
    }
  }
  return 0;
});
// 保存coupon
const saveCouponInfo = (couponList, currCouponId) => {
  confirmInfo.value.couponList = couponList;
  form.value.couponId = currCouponId;
  console.log("改变优惠券信息", confirmInfo.value);
};
// 计算折扣后的价格
let calculateFinalPrice = computed(() => {
  // 如果有其他的。。。
  // 优惠券
  let finalPrice = new Decimal(0);
  if (currCouponId.value > 0) {
    let coupon = confirmInfo.value.couponList.find(
      (item) => item.id == currCouponId.value
    );
    finalPrice = new Decimal(confirmInfo.value.total)
      .sub(new Decimal(coupon.amount))
      .toFixed(2);
  } else {
    finalPrice = confirmInfo.value.total
      ? new Decimal(confirmInfo.value.total).toFixed(2)
      : new Decimal(0).toFixed(2);
  }
  return finalPrice;
});

// 支付方式
const payType = [
  {
    name: "微信支付",
    url: wxIcon,
    value: 2,
  },
  {
    name: "支付宝",
    url: alipayIcon,
    value: 1,
  },
  {
    name: "银联支付",
    url: unionIcon,
    value: 3,
  },
  {
    value: 4,
    name: "货到付款",
  },
];
// 选择支付方式
const selectType = (value) => {
  activePayType.value = value;
  form.value.payType = value;
};
// 获取确认订单的信息
const getConfirmInfo = async () => {
  const res = await getConfirmOrderInfo(query);
  confirmInfo.value = res.data;
  list.value = res.data.items;
  addressList.value = res.data.addressList;
  form.value.orderToken = res.data.orderToken;
  confirmInfo.value.couponList = res.data.couponList ? res.data.couponList : [];
  const coupon = confirmInfo.value.couponList.find((e) => e.checked == true);
  if (coupon) {
    form.value.couponId = coupon.id;
  }
  const address = addressList.value.find((item) => item.defaultStatus == 1);
  if (address) {
    form.value.addressId = address.id;
  }
  form.value.payPrice = confirmInfo.value.payPrice;
};

// 确认订单
const form = ref({});
const handleConfirmoOrder = async () => {
  if (query.skuId) {
    form.value.skuId = query.skuId;
    form.value.count = query.count;
  }
  form.value.payType = activePayType.value;
  if (form.value.payType !== 1) {
    return proxy.$modal.msgError(
      "抱歉，该支付方式暂未开通，请选择其他支付方式！"
    );
  }
  const res = await submitOrder(form.value);
  // 跳转至支付宝付款
  router.push({
    path: "/payment",
    query: {
      orderSn: res.msg,
    },
  });
};

const saveAddressInfo = (addressId) => {
  console.log("addressId", addressId);
  form.value.addressId = addressId;
};
getConfirmInfo();
</script>

<style lang="scss" scoped>
:deep(.el-checkbox__inner) {
  &:hover {
    border-color: #1aa684;
  }
}
:deep(.el-checkbox__input.is-checked) {
  border-color: #1aa684;
  background-color: #1aa684;
}
:deep(.el-checkbox__input.is-checked) {
  .el-checkbox__inner {
    border-color: #1aa684;
    background-color: #1aa684;
  }

  // background-color: #1aa684;
}
.cart-container {
  background: #fff;
  padding: 20px;
  .cart-title {
    color: #555;
    font-size: 22px;
    font-weight: 300;
  }
  .cart-desc {
    font-size: 14px;
    color: #aaa;
  }
  .cart-list {
    margin-top: 20px;
    margin-bottom: 10px;
    .action {
      display: flex;
      flex-direction: column;
      align-items: start;
      .el-button {
        margin-left: 0;
      }
    }
    .el-input-number {
      width: 120px;
      :deep(.is-focus) {
        box-shadow: 0 0 0 1px #1aa684 inset;
      }
      :deep(.el-input-number__decrease) {
        &:hover {
          color: #1aa684;
        }
      }
      :deep(.el-input-number__increase) {
        &:hover {
          color: #1aa684;
        }
      }
    }
    .order-item {
      display: flex;
      .img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        margin-right: 20px;
      }
      .order-info {
        .title {
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .attr {
          color: #999;
        }
      }
    }
  }
  .purchase {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pur-text {
      font-size: 13px;
      margin-right: 5px;
      .red {
        margin-left: 5px;
        margin-right: 3px;
        font-weight: 300;
      }
    }
  }
}

.pay-type-list {
  padding: 10px;
  .title {
    padding: 10px 0;
  }
  .pay-card {
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.1s;
    border: solid 1px #e6e6e6;
    border-radius: 10px;
    height: 72px;
    img {
      width: 120px;
      height: 50px;
      object-fit: contain;
    }
    span {
      font-size: 20px;
      font-weight: 600;
      display: block;
      height: 50px;
      line-height: 50px;
    }
    &:hover {
      border: 2px solid #1aa684;
    }
  }
}
.active-pay {
  border: 2px solid #1aa684 !important;
}
</style>
